<template>
  <view class="re_box">
    <view class="starBox">
      <view class="starCell" v-for="(item, index) in evaList" :key="item.id">
        <view class="starText">{{ item.title }}</view>
        <view class="imgbox">
          <view
            class="starImg"
            v-for="(items, indexs) in 5"
            :key="indexs"
            @click="chooseStar(index, indexs)"
          >
            <image
              class="starPic"
              :src="whatStar(index, indexs)"
              mode="widthFix"
            ></image>
          </view>
        </view>
        <view class="startitle">{{re_title}}</view>
      </view>
    </view>
    <view class="group_textarea">
      <textarea
        style="width: 100%; height: 80%; font-weight: 400"
        :value="textContent"
        placeholder="请说说你的上课感受，例如：教练专业度、课程氛围等，为更多小伙伴提供参考～"
        placeholder-class="remtext"
        maxlength="200"
        @input="inputrem"
      />
      <view class="count">{{ textContent.length }} / {{ maxCount }}</view>
    </view>
    <view  class="img_list" v-if="false">
      <view class="img_box">
        <view
          class="img"
          v-for="(item, i) in imgArr"
          :key="i"
          @click="lookimg(item.netPath, i)"
        >
          <image
            @click="lookimg(item.netPath, i)"
            :src="item.tempUrl"
            mode="aspectFill"
          ></image>
          <view class="icon" @click.stop="delImg(i)">
            <image
              src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1710154762492571.png"
              mode="widthFix"
            ></image>
          </view>
        </view>
        <!-- #ifdef MP-WEIXIN -->
        <view class="img addimg" @tap="upload" v-if="imgArr.length < 3">
          <image
            src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17104950296621296.png"
            mode="widthFix"
          ></image>
        </view>
        <canvas
          canvas-id="tranCanvas"
          class="tranCanvas"
          :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"
        ></canvas>
        <!-- #endif -->
        <!-- #ifdef APP-PLUS -->
        <view class="img addimg" @tap="selectImg_APP" v-if="imgArr.length < 3">
          <image
            src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17104950296621296.png"
            mode="widthFix"
          ></image>
        </view>
        <canvas
          canvas-id="tranCanvas"
          class="tranCanvas"
          :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"
        ></canvas>
        <!-- #endif -->
      </view>
    </view>

    <view class="bottombtn">
        <view class="subbtn" @click="Eval">提交</view>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      evaList: [
        {
          id: "s1",
          title: "教练评价",
          star: 0,
        },
      ],
      textlist:['非常差','差','一般','满意','非常满意'],
      re_title:'',
      textContent: "", //评价内容
      fen:0, // 评分
      maxCount: 200,
      localList: [],
      imgArr:[],
      teID:'', // 教练ID
    };
  },
  onLoad(e){
    this.teID = e.id
  },
  methods: {
    
    //评价
    async Eval(){
      if(!this.fen){
        this.$pv.msg('请填写评分');
				return false
      }
      if(!this.textContent){
        this.$pv.msg('请填写评价');
				return false
      }
      let imglist = []
      for (let i = 0; i < this.imgArr.length; i++) {
          imglist.push(this.imgArr[i].netPath)
      }
      imglist = imglist.join(',')
      let evaltext = this.$util.utf16ToEntities(this.textContent)
      let _this = this
      uni.showModal({
            title: "温馨提示",
            content: '您确定提交该评论吗？',
            confirmText: "确定",
            success: async function (res) {
                if (res.confirm) {
                    let res1 = await _this.$api.post('Technicians/Eval',{
                        TechnicianID:_this.teID,
                        EvalContent:evaltext,
                        JS:_this.fen,
                        EvalImgs:imglist
                    })
                    if(res1.code == 0){
                        _this.back_to()
                    }else{
                      _this.$pv.msg(res1.message || '不能重复评论');
                    }
                } else if (res.cancel) {
                }
            },
        });
    },
    //文件上传
		async uploading(url, tempKey) {

			const r = await this.$upload(url, (pro) => {
				for (let i = 0; i < this.imgArr.length; i++) {
					if (this.imgArr[i].tempKey == tempKey) {
						this.imgArr[i].pro = pro;
					}
					
				}
				// this.imgArr.forEach((item) => {
				// 	if (item.tempKey == tempKey) {
				// 		item.pro = pro;
				// 	}
				// });
			});
			console.log(r,'r');
			for (let i = 0; i < this.imgArr.length; i++) {
				if (this.imgArr[i].tempKey == tempKey) {
					this.imgArr[i].netPath = r;
				}
			}
			this.$pv.closeLoad()
      console.log(this.imgArr,'111');

		},
    upload() {
			let _this = this;
			let imglength = this.imgArr.length || 0
			uni.chooseMedia({
				count: 3-imglength,
				mediaType: ['image'],
				sourceType: ['album', 'camera'],
				maxDuration: 30,
				camera: 'back',
				async success(res) {
					console.log(res,'res');
					for (let i = 0; i < res.tempFiles.length; i++) {
							let o = {
								duration: 0,
								fileType: res.tempFiles[i].fileType,
								tempUrl: res.tempFiles[i].tempFilePath,
								flieUrl: res.tempFiles[i].tempFilePath,
								tempKey: uni.$u.guid(8),
								pro: 0,
							};
						_this.imgArr.push(o);
						
						let rex = await _this.uploading(o.flieUrl, o.tempKey);
					}
				},
			});
		},
		selectImg_APP() {
			let _this = this;
			let imglength = this.imgArr.length || 0
			uni.showActionSheet({
				itemList: ['选择照片', '取消'],
				success: function (res) {
					if (res.tapIndex == 0) {
						let ind = 1;
						uni.chooseImage({
							// count:  允许上传的照片数量
							count: 3-imglength,
							// sizeType:  original 原图，compressed 压缩图，默认二者都有
							sizeType: ['original', 'compressed'],
							sourceType: ['album'],
							success(res) {
								res.tempFiles.forEach(async (item) => {
									let o = {
										duration: 0,
										fileType: 'image',
										tempUrl: item.path,
										flieUrl: item.path,
										tempKey: uni.$u.guid(8),
										pro: 0,
									};

									_this.imgArr.push(o);
									let rex = await _this.uploading(o.flieUrl, o.tempKey);
								});
							},
						});
						return;
					}
				},
				fail: function (res) { },
			});
		},
    delImg(i) {
			this.imgArr.splice(i, 1);
			// this.reqData.Images.splice(i, 1);
		},
    lookimg(url, index) {
			// let arr = JSON.parse(url);
			uni.previewImage({
				urls: [url],
				current: index,
			});
		},
    inputrem(e) {
      const { value, cursor } = e.detail;
      let str = this.$util.entitiesToUtf16(value);
      if (str.length > 200) {
        this.textContent = str.slice(0, 200);
      } else {
        this.textContent = str;
      }

      // this.reqData.Remark
    },
    // 点击选择星星
    chooseStar(lindex, sindex) {
      this.evaList[lindex].star = sindex + 1;
      this.fen = sindex + 1
      this.re_title = this.textlist[sindex]
      // const starNum = this.evaList[lindex].star;
      // const chooseStar = sindex + 1;
      // const cNum = Math.abs(starNum - chooseStar);
      // if (cNum > 0.5 || starNum-chooseStar == 0.5) {
      // 	this.evaList[lindex].star = chooseStar - 0.5;
      // } else if (cNum == 0) {
      // 	this.evaList[lindex].star = starNum - 0.5;
      // }else if(chooseStar-starNum == 0.5){
      // 	this.evaList[lindex].star = starNum + 0.5;
      // }
    },
    //判断是已灰色星星还是黄色（选中）状态的星星 lindex:evaList的index,sindex:选中的第几颗星星
    whatStar(lindex, sindex) {
      let staring;
      let starhalf;
      let stared;
      if (lindex == 0) {
        //总体高亮
        staring =
          "https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1719814859207878.png";
        //总体半亮
        // starhalf = 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1713853365936666.png';
        //总体灰色
        stared =
          "https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/17202602010231341.png";
      } else {
        staring =
          "https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1719814859207878.png";
        // starhalf = 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17138533895031496.png';
        stared =
          "https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/17202602010231341.png";
      }

      const num = this.evaList[lindex].star;
      const starNum = sindex + 1;
      return num - starNum >= 0
        ? staring
        : num - starNum == -0.5
        ? starhalf
        : stared;
    },
  },
};
</script>
<style lang='scss'>
page {
  background-color: #f6f6f6;
}
.re_box{
    background-color: #fff;
}
.starBox {
  width: calc(100%-30rpx);
  padding: 20rpx 30rpx 20rpx 0;
  margin-top: 16rpx;
  margin-left: 30rpx;
  border-bottom: 1rpx solid #E4E4E4;
  .starCell {
    width: 100%;
    display: flex;
    align-items: center;
    margin: 10rpx 0;
    .startitle{
        font-size: 28rpx;
        color: #999999;
    }
    .starText {
      width: 140rpx;
      font-size: 32rpx;
      font-weight: bold;
      color: #333333;
    }
    .imgbox {
      flex: 1;
      display: flex;
      align-items: center;
    }
    .starImg {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 80rpx;
      height: 70rpx;
      .starPic {
        width: 32rpx;
        height: 32rpx;
        display: block;
      }
    }
  }
  .starCell:first-child {
    .starText {
      font-size: 32rpx;
    }
    .starPic {
      width: 54rpx;
      height: 54rpx;
      display: block;
    }
  }
}
.remtext {
  color: #c2c2c2;
  font-size: 28rpx;
}
.group_textarea {
  height: 264rpx;
  margin-top: 30rpx;
  // background-color: #fff;
  // padding-left: 32rpx;
  // text-indent: 2em;
  padding: 0 30rpx;
  box-sizing: border-box;
  position: relative;

  .count {
    position: absolute;
    bottom: 15rpx;
    right: 15rpx;
    font-size: 24rpx;
    color: #c2c2c2;
  }
  /deep/ .u-textarea {
    background: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-bottom: none !important;
    padding: 0 !important;
    height: 100% !important;
    text-indent: 2em;
  }

  /deep/ .u-textarea__count {
    background: none !important;
    color: #0d0d0d !important;
  }

  /deep/ .u-textarea__field {
    color: #0d0d0d !important;
    font-size: 28rpx !important;
    height: 100% !important;
  }
}
.img_list {
    padding-left: 30rpx;
	padding-bottom: 32rpx;
    box-sizing: border-box;
	.title {
		font-size: 30rpx;
	}

	image {
		width: 100%;
		height: 100%;
	}

	.img_box {
		display: flex;
		align-items: center;
		// justify-content: space-evenly;
		flex-wrap: wrap;
	}

	.videobox {
		padding: 32rpx;
		position: relative;

		>view {
			width: 100%;
			height: 300rpx;
			border-radius: 16rpx;
			overflow: hidden;

			video {
				width: 100%;
				height: 100%;
			}
		}

		.icon {
			position: absolute;
			right: 10rpx;
			top: 10rpx;
			width: 50rpx;
			height: 50rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			// border-radius: 50%;
			z-index: 999;

			image {
				width: 40rpx;
				height: 40rpx;
				background: #fff;
				border-radius: 50%;
			}
		}
	}

	.img {
		width: 200rpx;
		height: 200rpx;
		border-radius: 8rpx;
		margin-right: 16rpx;
		margin-top: 16rpx;
		// overflow: hidden;
		position: relative;

		image {
			border-radius: 8rpx;
		}

		.icon {
			position: absolute;
			right: -20rpx;
			top: -14rpx;
			width: 50rpx;
			height: 50rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			// border-radius: 50%;
			z-index: 999;

			image {
				width: 40rpx;
				height: 40rpx;
				background: #fff;
				border-radius: 50%;
			}
		}
	}

	.img:nth-child(3n) {
		margin-right: 0;
	}

	.addimg {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #F6F6F6;

		image {
			width: 80rpx;
			height: 80rpx;
		}
	}
}
.bottombtn{
    width: 100%;
    height: 196rpx;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    .subbtn{
        width: 670rpx;
        height: 88rpx;
        background: #706EEE;
        border-radius: 44rpx;
        text-align: center;
        line-height: 88rpx;
        color: #fff;
        font-size: 32rpx;
        font-weight: bold;
        margin: 20rpx auto;
    }
}
</style>